<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="https://kc.kagura.me/" name="KCrawler官网">
    <meta content="https://www.kagura.me/" name="鹞之神乐">
    <meta content="https://github.com/KingFalse/KCrawler" name="GitHub">
    <title>KCrawler-开源云爬虫</title>
    <link href="/css/select.css" rel="stylesheet" type=text/css>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/mask.js"></script>
    <script src="/js/select.js"></script>
</head>
<body>
<div class="header">
    <ul class="content">
        <li>
            <input class="btn" id="return" type="button" value="首页">
        </li>
        <li id="alert" style="width: 80%;text-align: center"></li>
        <li class="right">
            <input class="btn" id="btn-next" onclick="step1();" type="button" value="下一步">
        </li>
    </ul>
    <!--记录自动翻页cssSelector-->
    <input id="autoPageSelector" th:value="${autoPageSelector}" type="hidden">
    <!--临时变量，记录当前被点击的cssSelector-->
    <input id="selector" type="hidden" value="">
    <form action="/select/detail" id="post-detail" method="post">
        <!--记录要爬取的链接-->
        <input id="targetSelector" name="targetSelector" type="hidden" value="">
        <!--记录要翻页的链接-->
        <input id="pageSelector" name="pageSelector" type="hidden" value="">
        <!--记录样本页面链接-->
        <input id="sampleUrl" name="sampleUrl" th:value="${url}" type="hidden">
        <!--记录主页面链接-->
        <input id="mainUrl" name="mainUrl" th:value="${url}" type="hidden">
        <!--记录traceId-->
        <input id="traceId" name="traceId" th:value="${traceId}" type="hidden">
    </form>
</div>
<div class="main">
    <iframe frameborder="0" height="1000px" id="mainiframe" name="mainiframe" onload="startInit();" scrolling="auto"
            src=""
            th:srcdoc="${srcdoc}" width="100%"></iframe>
</div>


<div class="table-wrapper" style="display: none">
    <table class="fl-table">
        <thead>
        <tr>
            <th>文本</th>
            <th>链接</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script lang="javascript">
    $("#return").click(function () {
        window.location.href = "/";
    });

    function startInit() {

        pageInit();

        /**
         * 点击元素后输出cssSelector
         * @param ev
         */
        document.getElementById('mainiframe').contentWindow.document.onclick = function (event) {
            var dom = document.getElementById('mainiframe').contentWindow.document.elementFromPoint(event.clientX, event.clientY);
            var path = getCssPath(dom);
            console.log("被点击的元素：" + path);

            //判断被点击的元素是不是a标签
            if (dom.tagName != "A") {
                $('.main').mask('<div style=\"color:deeppink;font-size:3vw;;white-space:nowrap;\">请点击超链接！</div>', "x", "x", true);
                return;
            }

            $(".fl-table tbody").html("");
            $("#mainiframe").contents().find(path).each(function () {
                console.log($(this).text());
                console.log($(this).attr("href"));
                $(".fl-table tbody").append('<tr><td>' + $(this).text() + '</td><td style="text-align: left">' + $(this).attr("href") + '</td></tr>');
            });

            $("#selector").val(path);
            var h = $(".table-wrapper").height();
            if ($(".table-wrapper").height() > $(window).height() * 0.7) {
                h = $(window).height() * 0.7;
            }

            $("#btn-next").val("确定");
            $('.main').mask('<div style=\"height:' + h + 'px;overflow-y: auto;\">' + $(".table-wrapper").html() + '</div>', function () {
                $("#btn-next").val("下一步");
            }, "x", true);

        };


        changeFrameHeight();

        $("#btn-next").hide();
        $("#btn-next").val("确定");
        $("#alert").text("请点选需要抓取的超链接");
        $('.main').mask('<div style=\"color:deeppink;font-size:6vw;;white-space:nowrap;\">请点选需要抓取的超链接</div>', function () {
            $('.main').mask('<div style=\"color:deeppink;font-size:6vw;;white-space:nowrap;\">如需抓取本页，请直接下一步</div>', function () {
                $("#btn-next").val("下一步");
                $("#btn-next").show();
            }, 2000, false);
            $("#btn-next").val("下一步");
        }, 2000, false);
    }


    window.onresize = function () {
        changeFrameHeight();
    };
    $(function () {
        changeFrameHeight();
    });


    /**
     * 进入第一步
     */
    function step1() {
        console.log("step1");
        $("#btn-next").attr("onclick", "step2();");
        $("#targetSelector").val($("#selector").val());
        step2();
    }

    /**
     * 进入第二步
     */
    function step2() {
        console.log("step2");
        $("#btn-next").attr("onclick", "step3();");
        $("#pageSelector").val($("#selector").val());

        $("#btn-next").hide();
        $("#btn-next").val("确定");
        $("#alert").text("请选择翻页元素");
        $('.main').mask('<div style=\"color:deeppink;font-size:6vw;;white-space:nowrap;\">接下来请选择翻页元素</div>', function () {
            $('.main').mask('<div style=\"color:deeppink;font-size:6vw;;white-space:nowrap;\">如无需翻页，请直接下一步</div>', function () {
                $("#btn-next").val("下一步");
                $("#btn-next").show();
                if ($("#autoPageSelector").val() != "") {
                    $("#mainiframe").contents().find('html,body').animate({scrollTop: $("#mainiframe").contents().find($("#autoPageSelector").val()).offset().top - $("#mainiframe").height() * 0.5}, 300);
                    $("#mainiframe").contents().find($("#autoPageSelector").val()).css('outline', 'solid 10px #FF5E52');
                }
            }, 2000, false);
            $("#btn-next").val("下一步");
        }, 2000, false);
    }

    /**
     * 进入第三步
     */
    function step3() {
        console.log("step3");
        $("#btn-next").attr("onclick", "step4();");
        $(".fl-table tbody").html("");
        $("#mainiframe").contents().find($("#targetSelector").val()).each(function () {
            $(".fl-table tbody").append('<tr class="nobackground"><td>' + $(this).text() + '</td><td style="text-align: left">' + $(this).attr("href") + '</td></tr>');
        });

        if ($("#targetSelector").val() == "") {
            return step4();
        }

        var h = $(".table-wrapper").height();
        if ($(".table-wrapper").height() > $(window).height() * 0.7) {
            h = $(window).height() * 0.7;
        }
        $("#btn-next").hide();
        $('.main').mask('<div style=\"height:' + h + 'px;overflow-y: auto;\">' + $(".table-wrapper").html() + '</div>', "x", "x", false);
        $(".rhui-mask-content thead").prepend("<tr><th style='background-color: #FF5E52' colspan=\"2\">请选择一个链接，然后确定</th></tr>");

        $('tr:gt(0)').mouseover(function () {
            $(this).addClass('tr_hover');      //通过jQuery控制实现鼠标悬停上的背景色，无视标题行用:gt(0)
        }).mouseout(function () {
            $(this).removeClass('tr_hover');   //通过jQuery控制实现鼠标悬停上的背景色
        });
        $('tr:gt(0)').click(function () {
            $("#btn-next").show();
            $('tr:gt(0).tr-click').removeClass('tr-click');
            $(this).addClass('tr-click');
            $("#sampleUrl").val($(this).find("td:eq(1)").text());
        });
    }

    /**
     * 进入第四步
     */
    function step4() {
        $("#post-detail").submit();
    }

</script>
</body>
</html>